﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>down3-演示页面</title>
    <link rel="stylesheet" type="text/css" href="res/down3/down.css" />
    <script type="text/javascript" src="res/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="res/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="res/knockout.js" charset="utf-8"></script>
    <script type="text/javascript" src="res/down3/down.file.js" charset="utf-8"></script>
    <script type="text/javascript" src="res/down3/down.folder.js" charset="utf-8"></script>
    <script type="text/javascript" src="res/down3/down.edge.js" charset="utf-8"></script>
    <script type="text/javascript" src="res/down3/down.app.js" charset="utf-8"></script>
    <script type="text/javascript" src="res/down3/down.js" charset="utf-8"></script>
    <script type="text/javascript" src="res/demo.js" charset="utf-8"></script>
    <script language="javascript" type="text/javascript">
	  	//根路径：http://localhost/down3/db/
	    var pos = window.location.href.lastIndexOf("/");
	    var api = [
	        window.location.href.substr(0, pos + 1),
	        "api/down3/"
	    ].join("");
	    function PageApp() {
	        var _this = this;
	        this.data = {
	            filesSvr:ko.observableArray(),
	            downer:new DownloaderMgr({
	            	//配置
                    config: {
                        License2: "",//授权码
                        //赋加字段，业务逻辑字段
                        Fields: { uid: "0" },
                        //后端接口-文件
                        "UrlCreate": api+"f_create.jsp",
                        "UrlDel": api+"f_del.jsp",
                        "UrlList": api+"f_list.jsp",
                        "UrlListCmp": api+"f_list_cmp.jsp",
                        "UrlUpdate": api+"f_update.jsp",
                        "UrlDown": api+"f_down.jsp",
                        //后端接口-文件夹
                        "UrlFdCreate": api+"fd_create.jsp",
                        "UrlFdPage": api+"fd_page.jsp"
                    },
                    //事件
	            	event:{
	            		//控件加载完毕
	                    ready:function()
	                    {
	                        _this.load_files();
	                    },
	                    //选择下载目录
	                    folderSel:function(dir){
	                        _this.down_folderSel(dir);
	                    },
	                    //添加下载任务
	                    fileAppend:function(f){
	                        _this.down_fileAppend(f);
	                    }
	                },
	                ui: { render: "downDiv"}
	            }),
	            downCur:null,
	            selAll:ko.observable(false),
	            sels:ko.observableArray()
	        };
	        this.ui = {
	            tip:null
	        };
	        
	        this.data.selAll.subscribe(function(nvalue){
	            var s = _this.data.filesSvr();
	            _this.data.filesSvr([]);
	            for(var i = 0 ;i<s.length;i++)
	            {
	                s[i].sel = nvalue;
	            }
	            _this.data.filesSvr(s);
	            _this.data.sels(s);
	        });
	
	        //api
	        this.load_files = function () {
	            $.ajax({
	                type: "GET"
	                , dataType: 'jsonp'
	                , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
	                , url: _this.data.downer.Config["UrlListCmp"]
	                , data: { uid: _this.data.downer.Config.Fields["uid"], time: new Date().getTime() }
	                , success: function (msg) {
	                    _this.ui.tip.hide();
	                    if (msg.value == null) {
	                        return;
	                    }
	
	                    var files = JSON.parse(decodeURIComponent(msg.value));
	                    _this.load_files_cmp(files);
	                }
	                , error: function (req, txt, err) { alert("加载上传数据失败！" + req.responseText); }
	                , complete: function (req, sta) { req = null; }
	            });
	        };
	        this.load_files_cmp = function (files) { 
	            _this.data.filesSvr.removeAll();
	            $.each(files,function(i,n){
	                var pv = $.extend({},n,{sel:false,fileUrl:_this.data.downer.Config.UrlDown});
	                _this.data.filesSvr.push(pv);
	            });
	            this.ui.tip.hide();
	        };
	        this.down_folderSel = function(dir){
	            setTimeout(function(){
	                if(_this.data.downCur!=null)
	                {
	                    _this.data.downer.addTask(_this.data.downCur);
	                    _this.data.downCur = null;
	                }
	                if(_this.data.sels().length>0)
	                {
	                    $.each(_this.data.sels(),function(i,n){
	                        _this.data.downer.addTask(n);
	                    });
	                    _this.data.sels([]);
	                }
	            },100);
	        };
	        this.down_fileAppend = function(f){
	            setTimeout(function(){
	                _this.data.downer.start_queue();
	            },300);
	        };
	        //event
	        this.mouse_over = function(data,e){
	            var o = $(e.srcElement);
	            if(!o.is("tr"))
	            {
	                o = o.parent();
	                while(!o.is("tr")) o = o.parent();
	            }
	            o.addClass("bk-hover");
	        };
	        this.mouse_out = function(data,e){
	            var o = $(e.srcElement);
	            if(!o.is("tr"))
	            {
	                o = o.parent();
	                while(!o.is("tr")) o = o.parent();
	            }
	            o.removeClass("bk-hover");
	        };
	        this.btnCbk_click = function(d,e){
	            _this.data.sels.push(d);
	        };
	        this.btnDown_click = function(d,e)
	        {
	            if (_this.data.downer.Config["Folder"] == "") 
	            { 
	                _this.data.downCur = d;
	                _this.data.downer.app.openFolder(); 
	                return; 
	            }
	
	            _this.data.downer.addTask(d);
	        };
	        //批量下载
	        this.btnDownBat_click = function(){
	            _this.data.sels([]);
	            $.each(_this.data.filesSvr(),function(i,n){
	                if(n.sel)
	                {
	                    _this.data.sels.push(n);
	                }
	            });
	            
	            if (_this.data.downer.Config["Folder"] == "") 
	            { 
	                _this.data.downer.app.openFolder(); 
	                return; 
	            }
	            _this.down_folderSel();
	        };
	        //
	        this.ready = function(){
	            this.ui.tip = $("#tip").show();
	            ko.applyBindings(_this);//
	        };
	    }
	
		$(function ()
	    {
	        var app = new PageApp();
	        app.ready();
		});
    </script>
    <style type="text/css">
        h4 {margin:0;}
        p {font: 9pt 宋体;}
        ul {list-style-type: none;font: 9pt 宋体;}
        ul li {display: inline;margin: 0 5px 0 0;font: 9pt 宋体;}
    </style>
</head>
<body>
    <p>此页为下载控件演示页面，与up7配合使用。可以下载up7数据库中的文件和文件夹</p>
    <div id="demos"></div>
    <!-- ui -->
    <p id="tip">正在加载数据</p>    
    <table id="tbCmp" cellpadding="0" cellspacing="0" border="1" class="files-svr">
    	<thead>
            <tr>
                <td colspan="5">
                    <a data-bind="click:btnDownBat_click"><img src="res/down3/imgs/16/down.png"/>批量下载</a>
                </td>
            </tr>            
        </thead>
        <tr id="tbHead">
            <td name="sel" align="center"><input type="checkbox" data-bind="checked:data.selAll" /></td>
            <td name="type">类型</td>
            <td name="name">名称</td>
            <td name="size">文件大小</td>
            <td name="op">操作</td>
        </tr>
        <tbody data-bind="foreach:data.filesSvr">
            <tr data-bind="event:{ mouseover:$parent.mouse_over,mouseout:$parent.mouse_out}">
                <td name="sel" align="center"><input type="checkbox" data-bind="checked:sel"/></td>
                <td name="type"><img src="res/down3/imgs/16/file1.png" data-bind="visible:!fdTask"/><img src="res/down3/imgs/16/folder1.png" data-bind="visible:fdTask"/></td>
                <td name="name" data-bind="text:nameLoc"></td>
                <td name="size" data-bind="text:sizeSvr"></td>
                <td name="op"><a data-bind="click:$parent.btnDown_click"><img src="res/down3/imgs/16/down.png" title='下载'/></a></td>
            </tr>
        </tbody>
    </table>
    <div id="downDiv"></div>
    <div id="msg"></div>
</body>
</html>